<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝鸡市残疾人服务平台</title>
    <link rel="stylesheet" href="cjr.css">
</head>
<body>
    <div class="nav-box"> 
        <ul>
            <li>
                <div class="nav-block">
                    
                    <a href="shouye.html"><i class="icon home"></i><span style="color: rgb(255, 255, 255)">系统首页</span></a>
                </div>
            </li>
           
           
            <li>
                <div class="nav-block on two">
                    
                    <i class="icon order"></i><span>招聘信息</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="job.html" ><li><span style="color: white">工作岗位</span></li></a>
                    <a href="consequence.html"><li><span style="color: white">面试结果</span></li></a>
                    
                    
                </ul>
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>相关服务</span>
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="explain.html"><li><span style="color: white"></span>器械说明</li></a>
                    <a href="shopping.html"><li><span style="color: white"></span>商城</li></a>
                    
                </ul>
            </li> 
            <li>
                <div class="nav-block">
                    <a href="train.html"><i class="icon user"></i><span style="color: rgb(255, 255, 255)">技术培训</span></a>
                    
                
                </div>
               
            </li>
            <li>
                <div class="nav-block on two">
                    <i class="icon order"></i><span>个人中心</span>
                    
                    <i class="arrow"></i>
                </div>
                <ul class="nav-two">
                    <a href="cjr.html"><li><span style="color: white">修改密码</span></li></a>
                    <a href="my.html"><li><span style="color: white">个人信息</span></li></a>
                    <a href="vital.html"><li><span style="color: white">个人简历</span></li></a>
                    
                </ul>
            </li>
           
        </ul>
    </div>
    <div>
        <div class="header"><h1>宝鸡市残疾人服务平台</h1></div>
        <div class="return">
            <a href="">退出登录</a>
        </div>
    </div>
    <div></div>
    <script>
        let nav=document.querySelector(".nav-box");
        nav.addEventListener("click",function(ev){
            if(ev.target.className.indexOf("two")>=0){
                ev.target.classList.toggle("on")
            }else if(ev.target.parentNode.className.indexOf("two")>=0){
                ev.target.parentNode.classList.toggle("on")
            }
        });
    </script>
       <nav class="sidebar">...</nav>
       <!-- 主内容区 -->
       <div class="main-content">
           <div class="security-container">
               <h2 class="security-title">修改密码</h2>
               
               <form id="passwordForm">
                   <!-- 当前密码 -->
                   <div class="password-group">
                       <input type="password" 
                              id="currentPassword"
                              class="password-input"
                              placeholder="当前密码"
                              required>
                       <span class="toggle-password" onclick="toggleVisibility('currentPassword')">👁️</span>
                   </div>
                   <!-- 新密码 -->
                   <div class="password-group">
                       <input type="password"
                              id="newPassword"
                              class="password-input"
                              placeholder="新密码 (至少8个字符)"
                              minlength="8"
                              required>
                       <span class="toggle-password" onclick="toggleVisibility('newPassword')">👁️</span>
                       <div class="strength-meter">
                           <div class="strength-fill"></div>
                       </div>
                       <div class="validation-message" id="strengthMessage"></div>
                   </div>
                   <!-- 确认密码 -->
                   <div class="password-group">
                       <input type="password"
                              id="confirmPassword"
                              class="password-input"
                              placeholder="确认新密码"
                              required>
                       <span class="toggle-password" onclick="toggleVisibility('confirmPassword')">👁️</span>
                       <div class="validation-message" id="confirmMessage"></div>
                   </div>
                   <button type="submit" class="submit-btn">立即修改</button>
               </form>
               <!-- 操作反馈 -->
               <div id="formFeedback" class="validation-message" style="margin-top:1.5rem"></div>
           </div>
       </div>
       <script>
           // 密码可见性切换
           function toggleVisibility(fieldId) {
               const field = document.getElementById(fieldId);
               field.type = field.type === 'password' ? 'text' : 'password';
           }
           // 密码强度计算
           function calculateStrength(password) {
               let strength = 0;
               if (password.length >= 8) strength++;
               if (password.match(/[A-Z]/)) strength++;
               if (password.match(/[0-9]/)) strength++;
               if (password.match(/[^A-Za-z0-9]/)) strength++;
               return strength;
           }
           // 更新强度指示器
           function updateStrengthIndicator(strength) {
               const colors = ['#e74c3c', '#f1c40f', '#2ecc71'];
               const messages = [
                   '密码强度：弱',
                   '密码强度：中等',
                   '密码强度：强'
               ];
               
               const fill = document.querySelector('.strength-fill');
               const message = document.getElementById('strengthMessage');
               
               const level = Math.min(strength, 2);
               fill.style.width = `${(level + 1) * 33}%`;
               fill.style.backgroundColor = colors[level];
               message.textContent = messages[level];
               message.style.color = colors[level];
               message.style.display = 'block';
           }
           // 表单验证
           document.getElementById('passwordForm').addEventListener('submit', function(e) {
               e.preventDefault();
               
               const current = document.getElementById('currentPassword');
               const newPass = document.getElementById('newPassword');
               const confirm = document.getElementById('confirmPassword');
               const feedback = document.getElementById('formFeedback');
               // 清除旧提示
               feedback.textContent = '';
               feedback.style.color = '';
               // 执行验证
               if (newPass.value !== confirm.value) {
                   feedback.textContent = '新密码与确认密码不一致';
                   feedback.style.color = 'var(--danger-color)';
                   return;
               }
               if (calculateStrength(newPass.value) < 2) {
                   feedback.textContent = '密码强度不足，请包含大写字母、数字或特殊字符';
                   feedback.style.color = 'var(--danger-color)';
                   return;
               }
               // 模拟API调用
               feedback.textContent = '正在提交...';
               feedback.style.color = 'var(--text-color)';
               
               setTimeout(() => {
                   feedback.textContent = '密码修改成功！';
                   feedback.style.color = 'var(--success-color)';
                   this.reset();
               }, 1500);
           });
           // 实时密码强度检测
           document.getElementById('newPassword').addEventListener('input', function() {
               const strength = calculateStrength(this.value);
               updateStrengthIndicator(strength);
           });
           // 确认密码实时验证
           document.getElementById('confirmPassword').addEventListener('input', function() {
               const message = document.getElementById('confirmMessage');
               if (this.value !== document.getElementById('newPassword').value) {
                   message.textContent = '两次输入的密码不一致';
                   message.style.color = 'var(--danger-color)';
                   message.style.display = 'block';
               } else {
                   message.style.display = 'none';
               }
           });
       </script>
   
</body>
</html>